<template>
	<view class="Add">
		<view class="head">
			<view class="head_li">
				<text class="icon_back" @click="navigBack">取消</text>
				<text>添加好友</text>
			</view>
		</view>
		<view class="body">
			<view class="b_head">
				<image :src="info.avatar"></image>
				<view class="text">
					<text>{{info.nickName}}</text>
				</view>
			</view>
			<view class="yan">
				<text>填写验证信息</text>
				<view class="input">
					<input v-model="validate" class="i_put"/>
				</view>
			</view>
			<view class="bei">
				<text>备注</text>
				<view class="input">
					<input v-model="remarks" placeholder="输入备注" class="i_put" placeholder-style="color:#bdbdbd;"/>
				</view>
			</view>
		</view>
		<view class="btom">
			<view class="add" @click="Send">发送</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import { getUserById , addFriend} from '../../common/api'; 
	export default {
		computed: {
			...mapState('info', ['myInfo'])
		},
		data() {
			return {
				info:{},
				uid:null,
				remarks:'',
				validate:''
			};
		},
		onLoad(val) {
			this.uid = val.uid;
			this.validate = '我是'+this.myInfo.nickName;
			this.Init();
		},
		methods:{
			Init(){
				getUserById({uid:this.uid}).then((res)=>{
					if(res.code == 200){
						this.info = res.data;
						this.remarks = this.info.nickName;
					}
				});
			},
			navigBack() {
				uni.navigateBack();
			},
			Send(){
				uni.showLoading();
				
				addFriend({
					remark: this.remarks,
					msg: this.validate,
					uid: this.myInfo.id,
					fid: this.uid
				}).then((res)=>{
					if(res.code == 200){
						uni.hideLoading();
						uni.showToast({
							title: '发送成功',
							duration: 1000
						});
						uni.navigateBack();
					}else{
						setTimeout(()=> {
							uni.hideLoading();
							uni.showToast({
								title: '发送失败',
								duration: 1000,
								icon:"none"
							});
							uni.navigateBack();
						}, 1000);
					}
				});				
			}
		}
	}
</script>

<style lang="scss">
.Add{
	.head {
		background: linear-gradient(90deg, rgba(122,220,241,1) 0%, rgba(43,163,242,1) 48%);
		width: 750rpx;
		height: 150rpx;
		position: fixed;
	
		.head_li {
			position: absolute;
			bottom: 0;
			width: 750rpx;
			height: 120rpx;
			display: flex;
			line-height: 100rpx;
			padding: 0rpx 0rpx;
	
			text {
				color: #fff;
				font-size: 33rpx;
				opacity: 0.8;
				padding: 20rpx 200rpx;
				display: flex;
				line-height: 80rpx;
			}
	
			.icon_back {
				padding: 20rpx 30rpx;
			}
		}
	}
	
	.body{
		width: 750rpx;
		position: fixed;
		top: 150rpx;
		.b_head{
			padding: 20rpx;
			display: flex;
			align-items: center;
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
			}
			.text{
				padding-left: 30rpx;
			}
		}
		.yan{
			padding: 20rpx;
			color: #bdbdbd;
			font-size: 28rpx;
			.input{
				width: 700rpx;
				height: 150rpx;
				margin: 20rpx 0;
				background-color: #ededed;
				border-radius: 20rpx;
				.i_put{
					height: 100rpx;
					padding: 0 20rpx;
					color: #4f4f4f;
				}
			}
		}
		.bei{
			padding: 20rpx;
			color: #bdbdbd;
			font-size: 28rpx;
			
			.input{
				width: 700rpx;
				height: 100rpx;
				margin: 20rpx 0;
				background-color: #ededed;
				border-radius: 20rpx;
				.i_put{
					height: 100rpx;
					padding: 0 20rpx;
					color: #4f4f4f;
				}
			}
		}
	}
	
	.btom {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 150rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		
		.add{
			background-color: rgba(52, 150, 255, 1.0);
			width: 600rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			border-radius: 10rpx;
			
			&:active {
				background-color: rgba(48, 131, 255, 1.0);
			}
		}
	}
}
</style>
